@import "../../colors";

$base-bg: $ui-white;
$fail-bg: $ui-orange;
$pass-bg: $ui-aqua;

.button {
    display: inline-block;
    margin: .5em 0;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 1px 1px $box-shadow-gray;
    background-color: $ui-blue;
    cursor: pointer;
    padding: .75em 1em;
    color: $type-white;
    font-size: .8rem;
    font-weight: bold;

    /* USER BUTTON STATES */
    &:hover {
        box-shadow: 0 2px 2px $box-shadow-gray;
    }

    &:active {
        box-shadow: inset 0 1px 2px $box-shadow-gray;
    }

    &:focus {
        outline: none;
    }

    /* DATA BUTTON STATES */
    &.white {
        border-top: 1px inset $active-gray;
        background-color: $base-bg;
        color: $ui-blue;
    }

    &.pass {
        background-color: $pass-bg;
    }

    &.fail {
        background-color: $fail-bg;
    }

    &:disabled {
        box-shadow: none;
    }
}
